<template>
	<view class="tcr-login">
		<uni-popup ref="loginDialog" type="dialog">
			<view class="comp-login-model">
				<image @click="handleCloseLogin" class="login-model-close" src="../../static/imgs/close.png"></image>
				<image src="../../static/imgs/wechat.png"></image>
				<button type="primary" @click="login">微信一键登录</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import apis from '../../apis/apis.js';
	
	export default {
		name:"TcrLogin",
		props: {},
		data() {
			return {
				
			};
		},
		methods: {
			/** 打开弹窗 */
			showLoginDialog() {
				this.$refs.loginDialog.open();
			},
			/** 关闭弹窗 */
			closeLoginDialog() {
				this.$refs.loginDialog.close();
			},
			handleCloseLogin() {
				this.closeLoginDialog();
			},
			login() {
				const that = this;
				uni.login({
					success(res) {
						if (res.code) {
							//发起网络请求
							that.$http.post({
								url: apis.loginUrl,
								data: {
									code: res.code
								},
							}).then(res => {
								if (res.code === 200) {
									uni.setStorageSync('token', res.token);
									uni.showToast({
										title: '登录成功',
										duration: 2000
									});
									that.getUserInfo();
									that.handleCloseLogin();
								}
							}).catch(err => {
								console.log('调用接口失败：', err);
							});
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
			},
			getUserInfo() {
				this.$http.get({
					url: apis.userInfoUrl
				}).then(res => {
					console.log(res, '调用接口成功');
					res.data.loginStatus = true;
					uni.setStorageSync('userInfo', res.data);
					this.initUserData();
				}).catch(err => {
					console.log('调用接口失败：', err);
				})
			},
		},
		watch: {},
	}
</script>

<style lang="scss">
.tcr-login {
	
	.comp-login-model {
		background: #ffffff;
		width: 60vw;
		height: 30vh;
		border-radius: 20rpx;
		padding: 20rpx;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		position: relative;
		
		> image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		.login-model-close {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
	
}
</style>